/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 16:21:41
 * @LastEditTime: 2022-05-03 16:26:49
 * @LastEditors: wangjq4214
 */

import { Suspense, LazyExoticComponent } from 'react';
import NProgress from 'nprogress';

import 'nprogress/nprogress.css';

const Loading = () => {
  useEffect(() => {
    NProgress.start();

    return () => {
      NProgress.done();
    };
  }, []);

  return null;
};

const Loadable = (Component: LazyExoticComponent<() => JSX.Element>) => {
  const TmpLoadable = (props: Record<string, unknown>) => (
    <Suspense fallback={<Loading />}>
      <Component {...props} />
    </Suspense>
  );

  return TmpLoadable;
};

export default Loadable;
